<template>
  <div class="container">
    <header class="header">
      <h1>地理文化搜索展示</h1>
      <p>输入关键词搜索相关地理文化内容，获取详细介绍。</p>
    </header>

    <div class="search-area">
      <input
        v-model="searchWord"
        @keyup.enter="doSearch"
        placeholder="请输入搜索词"
        class="search-input"
      />
      <button @click="doSearch" class="search-btn">搜索</button>
    </div>

    <div v-if="loading" class="loading">加载中...</div>
    <div v-if="error" class="error">{{ error }}</div>

    <div v-if="result" class="result">
      <h2>{{ result.name }}</h2>
      <p><strong>省份：</strong>{{ result.province }}</p>
      <p><strong>城市：</strong>{{ result.city }}</p>
      <div class="content" v-html="result.content"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { getUserList } from "@/api/axios";

const searchWord = ref("外滩");
const loading = ref(false);
const error = ref("");
const result = ref<null | {
  name: string;
  city: string;
  province: string;
  content: string;
}>(null);
interface PlaceResult {
  code: number;
  msg: string;
  result: {
    list: {
      name: string;
      city: string;
      province: string;
      content: string;
    }[];
  };
}

async function doSearch() {
  if (!searchWord.value.trim()) {
    error.value = "请输入搜索词";
    result.value = null;
    return;
  }
  loading.value = true;
  error.value = "";
  result.value = null;
  try {
    const res: PlaceResult = (await getUserList({
      key: "5af8253c9d54662c1fd3ecc719d0825c",
      word: searchWord.value.trim(),
    })) as any;
    loading.value = false;

    if (res?.code === 200 && res.result?.list?.length > 0) {
      result.value = res.result.list[0];
    } else {
      error.value = res.msg || "未找到结果";
    }
  } catch (e: any) {
    loading.value = false;
    // Axios错误结构：e.response.data.msg
    error.value =
      e?.response?.data?.msg || e?.message || "请求失败，请稍后重试";
  }
}
</script>

<style scoped>.container {
  max-width: 700px;
  margin: 40px auto;
  padding: 20px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.header {
  text-align: center;
  margin-bottom: 30px;
}

.header h1 {
  font-size: 2.2rem;
  color: #344fad;
  margin-bottom: 10px;
}

.header p {
  font-size: 1rem;
  color: #666;
}

.search-area {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.search-input {
  flex: 1 1 60%;
  min-width: 200px;
  padding: 8px 12px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
}

.search-input:focus {
  border-color: #409eff;
}

.search-btn {
  flex: 0 0 auto;
  padding: 8px 16px;
  font-size: 1rem;
  border: 1px solid #409eff;
  background-color: #409eff;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.search-btn:hover {
  background-color: #66b1ff;
}

.loading,
.error {
  margin-top: 20px;
  font-weight: bold;
  text-align: center;
}

.loading {
  color: #409eff;
}

.error {
  color: #f56c6c;
}

.result {
  margin-top: 30px;
  border: 1px solid #eee;
  padding: 20px;
  border-radius: 8px;
  background: #f9faff;
}

.result h2 {
  color: #303133;
  margin-bottom: 10px;
  text-align: center;
  font-size: 1.5rem;
}

.result p {
  margin: 5px 0;
  color: #606266;
  text-align: center;
}

.result .content {
  margin-top: 15px;
  line-height: 1.6;
  color: #4a4a4a;
  font-size: 0.95rem;
  word-break: break-word;
}

/* 📱 响应式适配 */
@media screen and (max-width: 600px) {
  .container {
    margin: 20px 10px;
    padding: 10px;
  }

  .header h1 {
    font-size: 1.5rem;
  }

  .search-area {
    flex-direction: column;
    align-items: stretch;
  }

  .search-input {
    width: 100%;
    border-radius: 4px;
  }

  .search-btn {
    width: 100%;
    border-radius: 4px;
  }
}

</style>
